<!DOCTYPE html>
<!-- 非单文件组件：一个文件中包含有n个组件：耦合性高 -->
<!-- 单文件组件：一个文件中包含有1个组件 -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<component1></component1>
			<component2></component2>
			<Hello></Hello>
		</div>
	</body>
	<script>
		
		//创建组件1
		const component1 = Vue.extend({
			template:`<h1>{{name}}</h1>`,
			// data的两种写法，必须要求return
			// 因为对象写法会导致对象属性被公用
			data(){
				return {
					name:'组件1'
				}
			}
		})
		
		const component2 = Vue.extend({
			template:`<h1>{{name}}</h1>`,
			data(){
				return {
					name:'组件2'
				}
			}
		})
		
		const hello = Vue.extend({
			template:`<h1>{{name}}</h1>`,
			data(){
				return {
					name:'hello'
				}
			}
		})
		
		//全局注册
		Vue.component('Hello',hello)
		
		new Vue({
			el:'#root',
			// 局部注册组件
			components:{
				component1,
				component2
			},
			// 创建vm时，可以使用对象data
			data(){
				return {
					
				}
			}
		})
		
		
		
	</script>
	<!-- 
	 几个注意点:
	 1.关于组件名:
		 一个单词组成:
			 第一种写法(首字母小写):school
			 第二种写法(首字母大写): School
		 多个单词组成:
			 第一种写 法(kebab-case命名):my-school
			 第二种写法(CamelCase命名): MySchool ( 需要Vue脚手架支持)
		 备注:
			 (1)组件名尽可能回避HTML中已有的元素名称，例如: h2、H2都不行。
			 (2)可以使用name配置项指定组件在开发者工具中呈现的名字。
	 2.关于组件标签:
			 第一种写法: <school></school> 
			 第二种写法: <school/>
				备注:不用使用脚手架时，<school/> 会导致后续组件不能渲染。
	 3.一个简写方式:
	 const school = Vue.extend(options)可简写为: const school = options 

	 -->
</html>